import { Row, Col, Menu, Descriptions } from "antd";
import { Link } from "react-router-dom";
import Layout from "../core/Layout";
import { ShoppingCartOutlined, UserOutlined, OrderedListOutlined } from '@ant-design/icons'
import { Typography } from 'antd'
import { isAuth } from "../../helpers/auth";

const { Title } = Typography

export default function AdminDash() {
    const {user: {name, email}} = isAuth()
    // 左侧栏目
    const adminLink = () => (
        <>
        <Title level={5}>管理员链接</Title>
        <Menu>
            <Menu.Item key='/admin/category'>
                <ShoppingCartOutlined />
                <Link to='/admin/category'>添加分类</Link>
            </Menu.Item>
            <Menu.Item key='/admin/product'>
                <UserOutlined />
                <Link to='/admin/product'>添加商品</Link>
            </Menu.Item>
            <Menu.Item key='/admin/order'>
                <OrderedListOutlined />
                <Link to='/admin/order'>订单列表</Link>
            </Menu.Item>
        </Menu></>
    )
    const adminInfo = () => (
        <Descriptions title="管理员信息" bordered>
            <Descriptions.Item label='昵称'>{name}</Descriptions.Item>
            <Descriptions.Item label='邮箱'>{email}</Descriptions.Item>
            <Descriptions.Item label='角色'>管理员</Descriptions.Item>
        </Descriptions>
    )
    return (
        <Layout title='管理员 Dashboard'>
            <Row>
                <Col span='4'>
                    {adminLink()}
                </Col>
                <Col span='20'>
                    {adminInfo()}
                </Col>
            </Row>
        </Layout>
    )
}